import type { ProColumns, ProFormInstance } from '@/components/Pro/';
import { ProTable } from '@/components/Pro/';
import { getChargeAndDischargeStatus } from '@/dictionary';
import { strategyTrackControllerGetStrategyPageDatas as getList } from '@/services/ess/strategyTrack';
import type { DatePickerProps } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef } from 'react';
import { useIntl, useModel } from 'umi';

const TableList: React.FC = ({ areaList }) => {
  const intl = useIntl();
  const formRef = useRef<ProFormInstance>();
  const { isArea } = useModel('@@initialState')?.initialState || {};

  useEffect(() => {
    formRef?.current?.setFieldValue('areaId', areaList?.[0]?.value);
    formRef?.current?.submit();
  }, [areaList]);

  const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
    const disabled = current && current >= moment().endOf('day');

    if (from) {
      return disabled || Math.abs(current.diff(from, 'month')) >= 3;
    }

    return disabled;
  };

  const columns: ProColumns<API.StrategyExecute>[] = [
    {
      title: intl.formatMessage({
        id: 'global.s/N',
      }),
      dataIndex: 'pageIndex',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({
        id: 'global.area',
      }),
      dataIndex: 'areaId',
      order: 200,
      valueType: 'select',
      initialValue: areaList?.[0]?.value,
      fieldProps: {
        options: areaList,
        allowClear: false,
      },
      hideInTable: !isArea,
      hideInSearch: !isArea,
      render: (_, record) => record.areaName,
    },
    {
      title: intl.formatMessage({
        id: 'global.date',
      }),
      dataIndex: 'date',
      valueType: 'dateTimeRange',
      initialValue: [moment(new Date()).startOf('day'), moment()],
      fieldProps: {
        disabledDate: disabledDate,
        allowClear: false,
        style: { minWidth: 340 },
      },
      colSize: 1.5,
      search: {
        transform: (value) => {
          if (value) {
            return {
              startDate: value[0],
              endDate: value[1],
            };
          }
        },
      },
      hideInTable: true,
    },
    {
      title: intl.formatMessage({
        id: 'global.time',
      }),
      dataIndex: 'executeTime',
      hideInSearch: true,
    },
    {
      title: `${intl.formatMessage({
        id: 'strategyControl.strategyTracking.realTimeTargetActiveCommand',
      })}(kW)`,
      dataIndex: 'targetPower',
      hideInSearch: true,
      width: 160,
    },
    {
      title: `${intl.formatMessage({
        id: 'strategyControl.strategyTracking.energyStorageIsActiveInRealTime',
      })}(kW)`,
      dataIndex: 'activePower',
      hideInSearch: true,
      width: 160,
    },
    {
      title: `${intl.formatMessage({
        id: 'strategyControl.strategyTracking.gridSupplyPointLoad',
      })}(kW)`,
      dataIndex: 'loadPower',
      hideInSearch: true,
      width: 160,
    },
    {
      title: intl.formatMessage({
        id: 'strategyControl.strategyTracking.chargeDischargeStatus',
      }),
      dataIndex: 'workState',
      hideInSearch: true,
      valueEnum: getChargeAndDischargeStatus(),
      width: 130,
    },
    {
      title: `${intl.formatMessage({
        id: 'strategyControl.strategyTracking.realTimeSOC',
      })}(%)`,
      dataIndex: 'soc',
      hideInSearch: true,
      width: 130,
    },
  ];
  return (
    <div>
      <ProTable<API.StrategyExecute, API.PageParams>
        formRef={formRef}
        rowKey="ts"
        // search={{
        //   span: { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 7 },
        //   submitter: {
        //     resetButtonProps: false,
        //   },
        // }}
        request={async (params) => {
          if (isArea && !params?.areaId) {
            return;
          }
          const result = await getList(params);
          return result;
        }}
        columns={columns}
      />
    </div>
  );
};
export default TableList;
